<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>滚动视觉差示例background-attachment:fixed;</title>
        <style>
            *{
                padding:0;
                margin:0
            }
            #main{
                width: 1280px;
                margin:auto;
                height: 5000px;
                color: red;
            }
            .bg-attachment{
                background:url("http://www.gopopcorn.ca/wp-content/uploads/2014/11/popcorninspace-bg-3-1.jpg") center center no-repeat;
                background-size: 100% 100%;
                box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -webkit-box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -moz-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -o-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -ms-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                background-attachment:fixed;
            }
            .bg-attachment .shadow{
                width:80%;
                height:700px;
                overflow:hidden;
                margin:auto;
            }
            .div2{
                background:url("https://imgsa.baidu.com/exp/w=500/sign=a05698c5aa8b87d65042ab1f37092860/21a4462309f790528b686dca07f3d7ca7acbd5ca.jpg") center center no-repeat;
                background-attachment:fixed;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div class="bg-attachment div2">
                <div class="shadow"></div>
            </div>
            <div class="" style="line-height:5000%;"> 

                    sssss
                    sssss
                    sssss
                    sssss
                    sssss
                    sssss
                    sssss
                </div>
            <div class="bg-attachment">
                <div class="shadow" style="line-height:5000%;"> 

                    sssss
                    sssss
                    sssss
                    sssss
                    sssss
                    sssss
                    sssss
                </div>
            </div>
            <div class="" style="line-height:5000%;"> 

                    sssss
                    sssss
                    sssss
                    sssss
                    sssss
                    sssss
                    sssss
                </div>
            <div class="bg-attachment div2">
                <div class="shadow"></div>
            </div>
        </div>
    </body>
</html>